<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品标题</th>
    <th>商品价格</th>
    <th>商品销量</th>
  </tr>
</table>

<script>
  //实例化一个空对象
  let p1 = {};
  //动态添加属性和方法(Java是不支持的)
  p1.name="张三";
  p1.age=18;
  p1.run = function () {
    console.log(this.name+":"+this.age);
  }
  p1.run();
  //实例化一个包含属性和方法的对象
  let p2 = {
    name:"李四",
    age:20,
    run:function () {
      console.log(this.name+":"+this.age);
    }
  }
  p2.run();
  let p = {title:"李宁篮球鞋",price:500,saleCount:2000};
  let arr = [{title:"匹克拖鞋",price:100,saleCount:1000},
    {title:"耐克袜子",price:80,saleCount:2231},
    {title:"李宁篮球鞋",price:500,saleCount:2000},
    {title:"李宁篮球鞋",price:500,saleCount:2000}]
  let t = document.querySelector("table");
  //遍历数组 把数组中商品的信息显示到表格里面
  for (let product of arr) {
      let tr = document.createElement("tr");
      let titleTd = document.createElement("td");
      let priceTd = document.createElement("td");
      let scTd = document.createElement("td");
      titleTd.innerText = product.title;
      priceTd.innerText = product.price;
      scTd.innerText = product.saleCount;
      tr.append(titleTd,priceTd,scTd);
      t.append(tr);
  }

</script>


</body>
</html>